<template>
	<view class="order-content">
		<view  class="map-box">
			<map  class="map" :latitude="latitude" :longitude="longitude" :markers="covers"
				:scale="15" :show-location="true">
				<cover-view class="map-view" @click="mapOrder">
					<cover-view @click="mapOrder">地图接单</cover-view>
				</cover-view>
			</map>
		</view>
		
		<scroll-view scroll-y @scrolltolower="getOrderList" :scroll-top="scrollValue">
			<view class="scroll">
				<view class="order-item" v-for="(item,index) in orderList" :key="index">
					<view class="c-name">{{item.customerName}}</view>
					<view class="c-list">
						<view class="row">
							<text>距离我: {{item.distance?item.distance:0}} km</text>
							<text>下单 : {{item.createTime}}</text>
						</view>
						<view class="row">
							<text>单号 : {{item.worksheetNumber}}</text>
							<text :style="{color: item.worksheetState === 0 ? overtimeColor : overtimeColor1}">到期: {{item.expireTime}}</text>
						</view>
					</view>
					<view class="c-detail" ref="imgHeight">
						<view class="detail-left">
							<image :src="item.imgUrl" class="img"></image>
						</view>
						<view class="detail-right">
							<text class="name">{{item.errorCode}}</text>
							<view class="description">{{item.faultDescription}}</view>
						</view>
					</view>
					<view class="c-btn">
						<button  class="btn" type="default" @click="navigateToNavigation(item.installLngat)">导航</button>
						<button  class="btn" type="default" @click="goToDetail(item.worksheetNumber)">详情</button>
						<button  class="btn" type="default" @click="receiveOrder(item)">接单</button>
					</view>
				</view>
				<u-loadmore :status="status" />
			</view>


			
		</scroll-view>
	</view>
</template>

<script>
	import * as API from '@/common/api';
	export default {
		name: "pages-orderPool-serviceOrder",
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				state: true,
				scrollValue: 0,
				oldScrollValue: 0,
				status: 'loadmore',
				params: {
					isPool: true,
					worksheetState: '0',
					pageNum: 1,
					pageSize: 10,
				},
				orderList: [],
				overtimeColor: '#7ecc00',
				overtimeColor1: '#d2001b',

			}
		},
		methods: {
			async getCurLoc() {
				uni.getLocation({
					success: (res) => {
						this.longitude = res.longitude;
						this.latitude = res.latitude;
					},
					fail: (res) => {
						console.log("得到经纬度失败", res);
					}
				});
			},
			gotoDetial() {
				uni.navigateTo({
					url: '/pages/orderProgress/orderProgress-waiting/orderProgress-waiting'
				})
			},
			gotoDetialS() {
				uni.navigateTo({
					url: '/pages/orderProgress/orderProgress-appointment/orderProgress-appointment'
				})
			},
			goToDetail(worksheetNumber) {
				uni.navigateTo({
					url: '/pages/orderPool/orderDetail?worksheetNumber=' + worksheetNumber
				})
			},
			async receiveOrder(worksheet) {
				const res = await API.receiveWorksheet(worksheet);
				if (res.code == 200) {
					uni.switchTab({
						url: '/pages/myOrder/myOrder',
						success() {
							uni.$u.toast('接单成功')
						}
					})
				}
			},
			mapOrder() {
				this.$emit('change')
			},
			async getInitOrderList() {
				await this.getCurLoc();
				setTimeout(() => {
					this.params.pageNum = 1;
					this.status = 'loadmore';
					this.orderList = [];
					this.getOrderList();
				}, 2000)

			},
			async getOrderList() {
				if (this.status != 'nomore') {

					this.status = 'loading';
					const res = await API.listWorksheet({
						params: this.params
					});

					res.rows.forEach(row => {
						if (row.imageVideoUrl) {
							row.imgUrl = row.imageVideoUrl.split(",")[0];
						}

					})
					this.orderList = this.orderList.concat(res.rows);
					await this.getCoversList();
					this.params.pageNum += 1;
					if (res.total <= this.params.pageNum * this.params.pageSize) {
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';

					}

				}

			},
			getDistance(lat1, lon1) {
				const lat2 = this.latitude;
				const lon2 = this.longitude;
				const R = 6371000; // 地球平均半径，单位米
				const dLat = (lat2 - lat1) * Math.PI / 180;
				const dLon = (lon2 - lon1) * Math.PI / 180;
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = (R * c) / 1000;
				return Number(distance).toFixed(2);
			},
			async getCoversList() {
				this.covers = [{
					id: 0,
					longitude: this.longitude,
					latitude: this.latitude,
					iconPath: '../../../static/myloc.png'
				}];
				for (const row of this.orderList) {
					const res = await API.getDeviceById(row.deviceId);
					let installLngat = res.data.installLngat;
					let latitude = installLngat.split(",")[1];
					let longitude = installLngat.split(",")[0];
					row.installLngat = res.data.installLngat;
					row.distance = this.getDistance(latitude, longitude);
					this.covers.push({
						id: row.id,
						longitude: longitude,
						latitude: latitude,
						callout: {
							content: res.data.customerName,
							display: 'ALWAYS',
							textAlign: 'center',
							bgColor: '#0000AA'
						},
						iconPath: '../../../static/worksheet.png'
					})
				}
			},
			navigateToNavigation(installLngat) {
				let longitude = Number(installLngat.split(",")[0]);
				let latitude = Number(installLngat.split(",")[1]);

				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					success: function() {
						console.log('导航成功');
					},
					fail: (err) => {
						console.log("打开失败", err);
					}
				});

			}
		},
	}
</script>

<style lang="less" scoped>
	.order-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		min-height: 88vh;
		.map-box{
			
			transform: translateY(0);
			width: 95%;
			height: 260px;
			border-radius: 10rpx;
			border-top: 1px solid rgba(255, 255, 255, 1);
			border-left: 1px solid rgba(255, 255, 255, 1);
			box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
			border-radius: 10rpx;
			background: #ffffff;
			 overflow:hidden;
			.map {
				position: relative;
				width: 100%;
				height: 100%;
				
				.map-view {
					position: absolute;
					right: 10px;
					bottom: 10px;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					height: 60rpx;
					width: 160rpx;
					background-color: #fff;
					box-shadow: 1px 4px 10px 0px rgba(0, 0, 0, 0.5);
					border-radius: 15px;
					color: #304EEB;
			
					font-size: 27rpx;
			
			
				}
			
			}
			
		}
		
		.scroll {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			height: 770rpx;
			gap: 20rpx;
			padding-bottom: 30rpx;
			.order-item {
					height: 220px;
					width: 95%;
					box-sizing: border-box;
					padding: 20rpx;
					margin-top: 10px;
					background-color: #ffffff;
					border-top: 1px solid rgba(255, 255, 255, 1);					border-left: 1px solid rgba(255, 255, 255, 1);					box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
					border-radius: 8px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					gap: 10rpx;
					.c-name {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						width: 100%;
						font-size: 28rpx;
						font-weight: bold;
						display: flex;
					
						background: #ffffff;
					}

					.c-list {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-start;
						gap: 15rpx;
						font-size: 22rpx;
						color: #989898;
						width: 100%;
						padding: 5rpx;
						box-sizing: border-box;
						padding-bottom: 20rpx;
						border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
						.row
						{
							width: 100%;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
						}

						
					}

					.c-detail {
						
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-around;
						width: 100%;
						box-sizing: border-box;
						margin-top: 10rpx;
						gap: 20rpx;
						height: 126rpx;
						.detail-left {
							
							align-items: center;

							.img {
								height: 126rpx;
								width: 180rpx;
								border-radius: 5px;
							}
						}

						.detail-right {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: flex-start;
							align-items: flex-start;
						
							gap: 10rpx;
							height: 100%;
							.title {
								width: 100%;
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-start;
							
							}

							.description {
								font-size: 26rpx;
								color: #989898;
								margin-left: 2%;
							}
						}
					}

					.c-btn {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-end;
						width: 100%;
						gap: 10rpx;
						.btn {
							width: 120rpx;
							height: 50rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 10px;
							font-size: 12px;
							font-weight: bold;
							margin: 0;
							padding: 0;


						}

						.btn:nth-of-type(1) {
							color: #4091D7;
							background: rgba(64, 145, 215, 0.06);
							border: 1px solid #4091D7;
						}

						.btn:nth-of-type(2) {
							color: #2E49E8;
							background: rgba(43, 70, 233, 0.08);
							border: 1px solid #2E49E8;
						}

						.btn:nth-of-type(3) {
							color: #ffffff;
							background: #93C145;
							box-shadow: 0px 8px 15px 0px rgba(147, 193, 69, 0.34);
						}
						.btn::after
						{
							border: none;
						}
					}

				

			}


		}


	}




</style>